<template>
    <div class="goodTypesContainer">
        <!-- 顶部查询导航 -->
        <div class="header">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item label="店铺名称">
                    <el-select v-model="shopId" filterable placeholder="请选择">
                    <el-option
                        v-for="item in shopOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="getDate">查询</el-button>
                <el-button type="primary" @click="reset">清空</el-button>&nbsp;&nbsp;
                <!-- 静态路由跳转,携带id  店铺增加商品-->
                <router-link :to="'/goods/info/'"
                style="padding-right: 10px;">
                  <el-button  type="primary" @click="">添加商品</el-button>
                </router-link>
                </el-form-item>
            </el-form>
        </div>
        <!-- 数据显示 -->
        <div class="content">
          <el-table
          ref="multipleTable"
          :data="shopData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
  
          <el-table-column
            label="序号"
            width="70">
            <template slot-scope="scope">{{ (scope.$index+1) }}</template>
          </el-table-column>
  
          <el-table-column
            prop="name"
            label="商品名"
            width="200">
          </el-table-column>
  
          <el-table-column
            label="商品封面"
            width="300">
            <template slot-scope="scope">
              <img class="avatar" :src="scope.row.cover">
            </template>
          </el-table-column>
  
          <el-table-column
            prop="description"
            label="商品描述"
            width="100">
          </el-table-column>
          
          
          <el-table-column
            label="商品类型"
            prop="type"
            width="100">
          </el-table-column>
          
          <el-table-column
            prop="price"
            label="商品价格"
            width="100">
          </el-table-column>

          
          
          <el-table-column
            label="商品状态"
            width="100">
            <template slot-scope="scope">
                {{ scope.row.detilImg == "true" ? '上架中' : '已下架' }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- 静态路由跳转,携带id  修改课程-->
              <router-link :to="'/goods/info/'+scope.row.id" 
              style="padding-right: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
              </router-link>
               &nbsp;&nbsp; 
              <el-button type="primary" @click="updateStateById(scope.row.id)"> 更改状态 </el-button>
              &nbsp;&nbsp; 
              <el-button type="danger" @click="remove(scope.row.id)" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-button style="margin-left: 50%;" type="danger" @click="removes()">批量删除商品</el-button>
    </div>

</template>
<script>
import shop from '@/api/shop.js'
import good from '@/api/good.js'
import shopService from '@/api/shopService.js'
export default {
  data() {
    return {
      shopId:'',  //店铺id
      shopData:'',  //商品列表
      shopOptions: [], //店铺列表
      multipleSelection: [] //选择记录
    }
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      this.getAllShops();
    },
    //获取店铺
    getAllShops(){
      shop.getAll()
          .then(response=>{
              this.shopOptions = JSON.parse(JSON.stringify(response.data.list).replace(/id/g,"value"));
          })
    },
    //获取状态
    async getStateById(id){
        var b = await shopService.getState({shopId:this.shopId,goodId:id})
                    .then(response=>{
                        return response.data.state;
                    })
                    return b;
    },
    //获取店铺信息
    getDate(){
        if(this.shopId.length > 0 && this.shopId != undefined){
            shopService.get(this.shopId)
            .then(response=>{
                var list = response.data.list;
                if(list.length > 0 && list != []){
                    good.gets(list)
                        .then(response=>{
                            this.shopData = response.data.list;
                        })
                }
            })
        }
    },
    //更改商品状态
    async updateStateById(id){
        await shopService.setState({shopId:this.shopId,goodId:id})
            .then(response=>{
                this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
            })
        this.getDate();
    },
    //删除
    remove(id){
      this.$confirm('确认删除?').then(_ => {
            shopService.remove({shopId:this.shopId,goodId:id})
                .then(response=>{
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.getDate();
            })
          })
    },
    removes(){
      if(this.multipleSelection.length == 0){
        this.$message({
                    message: '未选择商品',
                    type: 'error'
                  });
                  return;
      }
      this.$confirm('确认删除?').then(_ => {
        var ids = this.multipleSelection.map(item => item.id);
        shopService.removes({shopId:this.shopId,goodIds:ids})
          .then(response=>{
            this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                    this.getDate();
          })
        })
    },
    //选择商品
    handleSelectionChange(val) {
          this.multipleSelection = val;
    },
    reset(){
        this.shopId = '';
        this.shopData = '';
        this.shopOptions = '';
        this.init();
    }
  },
}
</script>

<style>
.goodTypesContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header,
.content,
.footer {
  width: 80%;
  padding: 20px;
  align-content: center;
  text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>